import React,{useState,useRef,useEffect} from 'react'
import { Button, Checkbox, Form, Input,Modal } from 'antd';
function Addmodal({addIsopen,closeaddfn,editIndex,editItem,isadd}) {
    const [isModalOpen, setIsModalOpen] = useState(true);
    const myref = useRef(null)
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        closeaddfn(false)
    };
    const onFinish = (values) => {  // 拿到输入框里输入的内容然后给父组件传递过去然后父组件添加
        // console.log('Success:', values); // 点击新增时候的确定，第二种情况点击编辑时候的确定
        values.key = new Date().getTime() * 1 
        closeaddfn(false,values)
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    useEffect(()=>{
        if (isadd === "编辑") {
            myref.current && myref.current.setFieldsValue(editItem)
        } else if (isadd === "新增") {
            myref.current && myref.current.resetFields()
        }

    },[isadd,editIndex,editItem])
    return (
        <>
           
            <Modal title={isadd} open={addIsopen} onOk={handleOk} onCancel={handleCancel} footer={null}>
                <Form
                    ref={myref}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="name"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your name!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="age"
                        name="age"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your age',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        label="address"
                        name="address"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your address!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

export default Addmodal